<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Masonry tests</title>
</head>
<style>
    #container{
        margin: 0 auto;
        background: red;
    }
    .item{
        width: 200px;     /* 控制每个图片宽度 */
        margin: 2px;
    }
    .item img {
        width: 200px;
        height: 100px;
    }
</style>

<body>

<div id="container">
    <div class="item">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3492170030,876722755&fm=11&gp=0.jpg">
    </div>
    <div class="item">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3492170030,876722755&fm=11&gp=0.jpg">
    </div>
    <div class="item">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3492170030,876722755&fm=11&gp=0.jpg">
    </div>
    <div class="item">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3492170030,876722755&fm=11&gp=0.jpg">
    </div>
    <div class="item">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3492170030,876722755&fm=11&gp=0.jpg">
    </div>
    <div class="item">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3492170030,876722755&fm=11&gp=0.jpg">
    </div>
</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="masonry/masonry.pkgd.min.js"></script>
<script>
    $('#container').masonry({
        itemSelector: '.item',
        isAnimated: true,
        isFitWidth: true     // 自适应宽度
    });
</script>
</body>
</html>